/* =========================
 * WebStorm Darcula for Vue3
 * ========================= */
pre {
    code {
        &.hljs {
            display: block;
            overflow-x: auto;
            padding: 1em;
            color: #A8B1B6;

            // 蠕动渐变背景
            background-image: linear-gradient(-45deg, #37332e, #000000);
            background-size: 200% 200%;
            animation: bg-position 15s ease infinite;

            // 渐变背景
            @keyframes bg-position {
                0%,
                100% {
                    background-position: 0 0;
                }
                50% {
                    background-position: 50% 50%;
                }
            }

            // 数字
            .hljs-number {
                color: #a6e22e;
            }

            // 布尔值
            .hljs-literal {
                color: #99bef6;
            }

            .hljs-symbol {
                color: #6897bb;
            }

            .hljs-bullet {
                color: #6897bb;
            }

            // 一个对象的属性
            .hljs-property {
                color: #a6e22e;
            }

            /* ---------- 关键字 ----------
             * const、let、import、export、if、for… */
            .hljs-keyword,
            .hljs-selector-tag,
            .hljs-deletion {
                color: #cc7832;
            }


            /* ---------- 变量 ----------
 * 变量名、模板变量、链接 */
            .hljs-variable,
            .hljs-template-variable,
            .hljs-link {
                color: #629755;
            }


            /* ---------- 注释 ----------
 * // 、<!-- --> 、/* *\/ */
            .hljs-comment,
            .hljs-quote {
                color: #808080;
                font-style: italic;
            }


            /* ---------- 元信息 ----------
             * @decorator、#region、#if… */
            .hljs-meta {
                color: #bbb529;
            }

            /* ---------- 字符串 ----------
             * "foo"、'bar'、`baz` */
            .hljs-string,
            .hljs-attribute,
            .hljs-addition {
                color: #69AA5C;
            }

            /* ---------- 定义 ----------
             * 函数名、类名、接口名、类型名 */
            .hljs-section,
            .hljs-title,
            .hljs-type {
                color: #ffc66d;
            }

            /* ---------- 标签/选择器 ----------
             * <template>、<script>、div、.class、#id */
            .hljs-name,
            .hljs-selector-id,
            .hljs-selector-class {
                color: #2AB9A2;
            }

            /* ---------- Vue 专用 ----------
             * v-if、v-for、@click、:prop、#slot */
            .hljs-built_in,
            .hljs-tag .hljs-attr {
                color: #B4BCC3;
            }

            /* ---------- 插值 ----------
             * {{  }}  */
            .hljs-template-tag,
            .hljs-template-variable {
                color: #C77DBB;
                font-weight: 500;
            }

            /* ---------- 强调/加粗 ----------
             * *italic*、**bold** */
            .hljs-emphasis {
                font-style: italic;
            }

            .hljs-strong {
                font-weight: bold;
            }
        }
    }
}




